/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2018-01-12 01:01:17
 * @Last Modified time: 2018-01-12 01:01:17
 * @Description: 绘制圆角矩形 
 */
window.onload = function () {
  var canvas = document.querySelector('.canvas')
  var cxt = canvas.getContext('2d')

  createRoundedRect(cxt, 100, 100, 20, 20, 20);
  cxt.fillStyle = "HotPink";
  cxt.fill();
  /*
   * createRoundedRect()用于绘制圆角矩形
   * width、height：分别表示长和宽
   * r：表示圆角半径
   * offsetX、offsetY：分别表示左上角顶点坐标
   */
  function createRoundedRect(cxt, width, height, r, offsetX, offsetY) {
    cxt.beginPath();
    cxt.moveTo(offsetX + r, offsetY);
    cxt.lineTo(offsetX + width - r, offsetY);
    cxt.arcTo(offsetX + width, offsetY, offsetY + width, offsetY + r, r);
    cxt.lineTo(offsetX + width, offsetY + height - r);
    cxt.arcTo(offsetX + width, offsetY + height, offsetX + width - r, offsetY + height, r);
    cxt.lineTo(offsetX + r, offsetY + height);
    cxt.arcTo(offsetX, offsetY + height, offsetX, offsetY + height - r, r);
    cxt.lineTo(offsetX, offsetY + r);
    cxt.arcTo(offsetX, offsetY, offsetX + r, offsetY, r);
    cxt.closePath();
  }
}